<template>

<div id="home"  class='home'>
<img style="width:100vw;height:100%;position: absolute;left:0;top:0;z-index=0" src="/static/images/12/bag.jpg" alt="">
  	    <!-- <div class='banner'>
        	<swiper :options="swiperOption" class="swiper-box">
								<swiper-slide v-for="(sideItem,sideIndex) in imgUrl" :key="sideIndex"><img src="//cb-yunxuan.oss-cn-hangzhou.aliyuncs.com/998c02a20c4f6f0fae0c27c9bb679082.jpg"
								:src="sideItem"   /></swiper-slide>
								<div class="swiper-pagination" slot="pagination"></div>
			 </swiper>
       </div> -->
   
      <img style="width:100vw;height:100vw;  position: relative;z-index:10;" :src="bagImg" alt="">
       <div class="select">
            
            <ul style="margin-top:-135px;position:relative;z-index:999">
                <img style="width:157px;height:33px;margin:0 auto;display:block;margin-bottom:16px;" :src="nav1" alt="">
                <!--  -->
            
                         <li :style="{'color':colorList[index%4],'margin-bottom':'4vw','position':'relative', 'width':'324.5px','height':'139px'}"   v-for="(item,index) in selectListTop" :key="index">
                             <img  style=" position: relative;z-index:10;width:100%;height:100%;position: absolute;left:0;top:0;z-index:0" :src="bagColorList[index%4]" alt="">
                           <navigator  hover-class="none" :url="'/pages/goods/goods?productId=' + item.productId+'&img='+ item.productThumbUrl">
                                            <div   class='pic'  style=" width: 90px;height: 90px; position: absolute; left: 59px; top:6px;">
                                                <img   :src="item.productThumbUrl" alt="">
                                            </div>
                                            <div style="height: 90px;top:6px;"  class='bottom'>
                                                <p style="text-indent:0;line-height: 18px; height: 36px; font-size: 14px; width: 98px;position: absolute;right: 70px;top: 8px;"  >{{item.productName }}</p>
                                                <div style="  width: 98px; height: 40px; right: 70px; bottom:2px;;" class='MBprice'>
                                                    <div style=" width: 45px;font-size: 13px;width: 45px;" class='schedule'>
                                                    <span>原价{{item.originallyPrice}}</span>
                                                    <span>狂欢价:</span>
                                                   </div>
                                                    <div class="price">
                                                       <span style="font-size: 36px; top:-7px;">{{item.price}} </span> 
                                                    </div>
                                                </div>       
                                          </div>
                           </navigator>
                            </li>
              
                    </ul>
                    <ul v-if='selectList.length>0' >
                        <img style=" position: relative;z-index:10;width:157px;height:33px;margin:0 auto;display:block;margin-bottom:16px;" :src="nav2" alt="">
        
                        
                          <li :style="{'color':colorList[index%4],'margin-bottom':'4vw','position':'relative', 'width':'324.5px','height':'139px'}"   v-for="(item,index) in selectList" :key="index">
                             <img  style="width:100%;height:100%;position: absolute;left:0;top:0;z-index:0" :src="bagColorList[index%4]" alt="">
                           <navigator  hover-class="none" :url="'/pages/goods/goods?productId=' + item.productId+'&img='+ item.productThumbUrl">
                                            <div   class='pic'  style=" width: 90px;height: 90px; position: absolute; left: 59px; top:6px;">
                                                <img   :src="item.productThumbUrl" alt="">
                                            </div>
                                            <div style="height: 90px;top:6px;"  class='bottom'>
                                                <p style="text-indent:0;line-height: 18px; height: 36px; font-size: 14px; width: 98px;position: absolute;right: 70px;top: 8px;"  >{{item.productName }}</p>
                                                <div style="  width: 98px; height: 40px; right: 70px; bottom:2px;;" class='MBprice'>
                                                    <div style=" width: 45px;font-size: 13px;width: 45px;" class='schedule'>
                                                    <span>原价{{item.originallyPrice}}</span>
                                                    <span>狂欢价:</span>
                                                   </div>
                                                    <div class="price">
                                                       <span style="font-size: 36px; top:-7px;">{{item.price}} </span> 
                                                    </div>
                                                </div>       
                                          </div>
                           </navigator>
                            </li>
              
                    </ul>

       </div>
       <div style="height:40px;"></div>
   
       
  </div> 
</template>

<script>
import api from '@/utils/api'
 
 
 

export default{

    data(){
        return{
            imgUrl:'',
            width:'30%',
            loadingBt: false,
            selectList:[],
            page:1,
            nav1:'/static/images/12/nav1.png',
            nav2:'/static/images/12/nav2.png',
         
            items:'',
            swshow:true,
                   
             bagImg:'/static/images/12/banner.jpg',
            ageImgList:['婴童','女小童','女中童','女大童','男小童','男中童','男大童','中性'],
            banner:'',
          swiperOption: {
            pagination: '.swiper-pagination',
            paginationClickable: true,
            autoplay: 2000,
            initialSlide: 0,
            loop: true,
            autoplayDisableOnInteraction:false, 
           
             },

           selectListTop:[],
           colorList:['#F92C57','#CE5CF9','#5C84F6','#FEB626'],
           bagColorList:[
               '/static/images/12/bag1.png',
               '/static/images/12/bag2.png',
               '/static/images/12/bag3.png',
               '/static/images/12/bag4.png',
           
           ]
        }
    },
    onShow(){
      
     this.getInfo();
     this.getselectList();
 
  
                
    },
     onReachBottom(){
    
    if(this.loadingBt){
       this.getselectList()
    }
  
  },
    methods:{ 
           bagColor(index){
         
              let num=parseInt(index%4)+1
                return '/static/images/12/bag'+num+'.png';
           },
            Color(index){
                let color=''
              let num=parseInt(index%4)+1
              if( (index%4)==0 ){
                  color='#F92C57'
              }else if( (index%4)==1){
                  color='#CE5CF9'
              }else if((index%4)==2){
                  color='#5C84F6'
              }else{
                  color='#FEB626'
              }
                return color;
           },
          
         async    getInfo() {
                   let data=JSON.stringify({"pageIndex":this.page,"pageSize":"10"})
                      const res = await api.getSpecialActivityBanner({"data":data});
               
                    let arrimgUrl=[]
                    this.imgUrl=arrimgUrl.push(res.data.imgUrl)
                    this.imgUrl=arrimgUrl
                   console.log(this.imgUrl,99999)
              
               
           },
           togoodsDetails(id){
               
            
           },
          async     getselectList() {

                      let sdata=JSON.stringify({"pageIndex":this.page,"pageSize":"10"})
                      const res = await api.getSpecialActivityProduct({"data":sdata});

                  
                      if(this.page==1){
                          this.selectListTop=res.data.list.slice(0,4);
                          this.selectList=res.data.list.slice(4,10)
                      }else{
                          this.selectList = this.selectList.concat(res.data.list);
                      }
                      
                      
                      console.log(this.selectListTop,888888)
                           if (res.data.list.length == 10) {
                                this.page++;
                                this.loadingBt = true;
                                
                            }
                    // window.localStorage.userId = this.datas.storeInfo.userId;
                
               
           },
         
    }

}

    
</script>


<style lang="scss" scoped >
.home{
    // background: url('./static/images/home_buttom_ppg@2x.png');
    //   background: url("/static/images/12/bag.jpg") ;
      background-size: 100%;
      min-height:100vh;
      position: relative;
   
}
.banner{
    height: 43vw;;
    
}
.select{

    .title{
        text-indent: 15px;
           height: 55px;
            color: #333333;
            font-size: 14px;
            line-height: 55px;
            background: #fff;
            margin-bottom: 15px;
            position: relative;
            z-index: 11;
    }
 
 ul {
      
  font-size: 0;
  li {
   
    margin:0 auto;
  
 
   background: url("/static/images/12/bag4.png");
   background-size: 100% 100%;
   position: relative;
    // background:rgba(255,209,232,1);
 
     .pic {
   
      img{
          display: block;
          width: 100%;
          height: 100%;;
      }
    }
    .bottom {
     position: absolute;
     right: 0;
   
   
        p:nth-child(1) {
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
        
            font-family:PingFangSC-Regular;
            font-weight:400;
        }
     .MBprice{
           position: absolute;
          
            
            .price{
                float: left;;
                position: relative;
                span{
                    position: absolute;
                   
                }
               
            }
            .schedule{
                float: left;
                
                span:nth-child(1){
                    font-size: 9px;
                    text-decoration:line-through;
                    display: block;
                }
                 span:nth-child(2){
                    font-size: 11px;
                }
            }
     }

  }  
   
 
  
  }
}
}
 
 
 

.swiper-box {
   
    width: 100%;
    height: 43vw;;
    margin: 0 auto;
    text-align: center;
    .swiper-pagination-bullet-active{
        background-color: red;
    }
 
  }
	img{
		width: 100%;
		height: 100%;
	}
  .swiper-item {
    height: 100%;
    text-align: center;
    font-size: 18px ;
    background: #fff;
    /* Center slide text vertically */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
  }




.swiper-pagination-bullet{
  /* background-color: #fff; */
  opacity: 0.5;;
   
	width: 5px;
	height:5px;
}
.swiper-pagination-bullet-active{
   background-color: #fff;
  opacity: 1;;
}
 
</style>